<template>
  <div class="goods-detail-container">
    <ul class="banner">
      <li v-for="(image, index) in topImages" :key="index" class="bigImg">
        <img :src="image" />
      </li>
    </ul>

    <ul class="indicator">
      <li class="thumb" :class="{ active: selectedIndex === -1 }" @click="handleFirstThumbClick">
        <img :src="firstThumb" />
      </li>
      <li class="thumb">
        <span class="label-text">{{ labelV2 }}</span>
      </li>

      <li
        v-for="(image, index) in topImages"
        :key="index"
        class="thumb"
        :class="{ active: selectedIndex === index }"
        @click="handleThumbClick(index)"
      >
        <img :src="image" />
      </li>
    </ul>

    <div class="sku">
      <div class="price-sales">
        <div class="price">{{ price }}</div>
        <div class="sales">{{ sales }}</div>
      </div>
      <div class="title-help">
        <div class="title">{{ title }}</div>
        <div class="help">
          <van-icon name="friends-o" size="18" />
          <span>帮我选</span>
        </div>
      </div>
    </div>

    <van-cell is-link @click="handleSelectColorSize">
      <template #title>
        <span class="selected-custom-title">选择</span>
        <span class="selected-custom-content"> 尺码 颜色</span>
      </template>
    </van-cell>

    <van-cell>
      <template #title>
        <span class="express-custom-title">{{ express }}</span>
        <span class="express-address">{{ address }}</span>
      </template>
    </van-cell>

    <van-cell is-link class="services">
      <template #title>
        <span class="service-custom-title">服务</span>
        <span class="service-content">
          <ul>
            <li v-for="(service, index) in services" :key="index">{{ service.name }}</li>
          </ul>
        </span>
      </template>
    </van-cell>

    <div class="comments">
      <div class="rate-score">
        <div class="rate">评价({{ rate }})</div>
        <div class="score">评分{{ score }}</div>
      </div>

      <div class="rate-tags">
        <ul>
          <li v-for="(tag, index) in rateTags" :key="index">{{ tag.value }}({{ tag.num }})</li>
        </ul>
      </div>

      <div class="comment-list">
        <ul>
          <li v-for="(comment, index) in comments" :key="index">
            <div class="avatar-user">
              <img :src="comment.user.avatar" class="avatar" />
              <div class="user-time">
                <div class="user">{{ comment.user.uname }}</div>
                <div class="time">{{ comment.created }}</div>
              </div>
            </div>
            <div class="comment-content">
              {{ comment.content }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="seller">
      <img :src="shopLogo" class="shop-logo" />
      <div class="seller-info">
        <div class="name-store">
          <div class="name">{{ shopName }}</div>

          <div class="store">进店 <van-icon name="arrow" /></div>
        </div>
        <div class="num">
          <van-rate v-model="level" allow-half /> | {{ saleDesc }} {{ onShelfGoods }}
        </div>
        <ul class="labels">
          <li v-for="(label, index) in labels" :key="index">
            <van-tag plain type="primary"> {{ label.text }}</van-tag>
          </li>
        </ul>
      </div>
    </div>

    <van-tabs v-model:active="activeTab" @change="handleTabChange">
      <van-tab title="图文详情" name="section1"></van-tab>
      <van-tab title="商品参数" name="section2"></van-tab>
    </van-tabs>

    <!-- 共享内容区域 -->
    <div class="content" ref="contentRef">
      <section id="section1" class="section">
        <div class="desc">
          {{ desc }}
        </div>
        <ul class="detail_info">
          <li v-for="(item, index) in detail_info" :key="index">
            <img :src="item" />
          </li>
        </ul>
      </section>
      <section id="section2" class="section">
        <div class="params">商品详情</div>

        <ul class="params-content">
          <li v-for="(item, index) in Object.entries(params || {})" :key="index" class="param-item">
            <div class="param-key">{{ item[0] }}</div>
            <div class="param-value">
              <template v-if="item[1].includes(',')">
                <span v-for="(value, i) in item[1].split(',')" :key="i" class="value-item">
                  {{ value.trim() }}
                </span>
              </template>
              <template v-else>
                {{ item[1] }}
              </template>
            </div>
          </li>

          <li>查看全部</li>
        </ul>
      </section>
    </div>

    <van-popup closeable position="bottom" v-model:show="show" class="custom-popup">
      <div class="info">
        <img src="" alt="" />
      </div>

      <div class="colors">
        <p>颜色</p>

        <!-- <van-button plain type="default" v-for="(color, index) in colors" :key="index">{{ color.label }}</van-button> -->

        <van-grid :column-num="4" :gutter="10">
          <van-grid-item :text="color.name" v-for="(color, index) in colors" :key="index" />
        </van-grid>
      </div>

      <div class="size">
        <p>尺码</p>

        <van-grid :column-num="2" :gutter="10">
          <van-grid-item :text="size.name" v-for="(size, index) in sizes" :key="index" />
        </van-grid>
      </div>

      <div class="number">
        <p>数量</p>

        <van-stepper v-model="stepperValue" />
      </div>
    </van-popup>

    <bottom-bar />
  </div>
</template>

<script setup>
import { getGoodsDetail } from '@/api/index.js'

import { useRoute } from 'vue-router'
const route = useRoute()

import { ref, onMounted, computed } from 'vue'

// 商品ID
const id = ref(route.params.id)

const result = ref(null)

const firstThumb = computed(() => {
  return result.value?.webImOptionInfo?.option?.img
})

const labelV2 = computed(() => {
  return result.value?.skuBarInfo?.labelV2
})

const topImages = computed(() => {
  return result.value?.topImages
})

const price = computed(() => {
  return result.value?.skuInfo?.defaultPrice
})

// const sales = computed(() => {
//   return result.value?.normalPrice?.sales
// })

const title = computed(() => {
  return result.value?.skuInfo?.title
})

const show = ref(false)

const selectedIndex = ref(-1) // 默认选中第一个

const colors = computed(() => {
  return result.value?.skuInfo.props[0].list
})

const sizes = computed(() => {
  return result.value?.skuInfo?.props[1].list
})

// 产地
const address = computed(() => {
  const target = result.value?.itemServices?.columns.find((item) => item.name === 'address')
  return target?.desc
})

// 快递费
const express = computed(() => {
  const target = result.value?.itemServices?.columns.find((item) => item.name === 'express')
  return target?.desc
})

// 销量
const sales = computed(() => {
  const target = result.value?.itemServices?.columns.find((item) => item.name === 'sales')
  return target?.desc
})

// 服务
const services = computed(() => {
  return result.value?.itemServices?.services
})

// 评价
const rate = computed(() => {
  return result.value?.rateInfo?.cRate
})

// 评分
const score = computed(() => {
  return result.value?.rateInfoV2?.cScore
})

// 评论tag
const rateTags = computed(() => {
  return result.value?.rateInfo?.rateTags
})

// 评论相关
const comments = computed(() => {
  return result.value?.rateInfoV2?.list
})

// 店铺Logo
const shopLogo = computed(() => {
  return result.value?.shopInfo?.shopLogo
})

// 店铺名称
const shopName = computed(() => {
  return result.value?.shopInfo?.name
})

//店铺描述
const saleDesc = computed(() => {
  return result.value?.shopInfo?.saleDesc
})

// 在架商品
const onShelfGoods = computed(() => {
  return result.value?.shopInfo?.cGoods
})

// 店铺等级
const level = computed(() => {
  return result.value?.shopInfo?.level
})

// 店铺标签
const labels = computed(() => {
  return result.value?.shopInfo?.shopLabels
})
// 商品描述
const desc = computed(() => {
  return result.value?.detailInfo?.desc
})

// detail_info
const detail_info = computed(() => {
  return result.value?.detailInfo?.detailImage.find((item) => item.key === '图文详情')?.list
})

// 商品参数
const params = computed(() => {
  return result.value?.itemParams?.info?.set
})

const stepperValue = ref(1)

const handleFirstThumbClick = () => {
  selectedIndex.value = -1 // 使用-1表示第一个固定缩略图的选中状态
}

const handleThumbClick = (index) => {
  selectedIndex.value = index
  //切换为对应款式的图
}

const handleSelectColorSize = () => {
  //弹出颜色 和尺寸选择界面
  show.value = true
}

const activeTab = ref(0)

const contentRef = ref(null)
const handleTabChange = (name) => {
  const element = document.getElementById(name)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' }) // 平滑滚动到目标段落
  }
}

onMounted(async () => {
  const res = await getGoodsDetail(id.value)

  console.log('id', id.value)

  console.log('res', res)

  if (res.ret === 'SUCCESS') {
    result.value = res.data.result
  }
})
</script>

<style lang="scss" scoped>
.goods-detail-container {
  padding-bottom: 60px;

  .banner {
    list-style: none;
    height: 350px;
    overflow: hidden;
    margin-top: 10px;

    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    .bigImg {
      height: 100%;
      width: 100%;
      object-fit: cover;
      margin-right: 10px;
      text-align: center;

      img {
        width: auto;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .indicator {
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background-color: #fff;

    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-start;
    align-items: center;
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;

    .thumb {
      min-width: 40px;
      position: relative;
      transition: transform 0.2s;

      &.active {
        &:first-child::after {
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 1px;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0px;
          left: 0px;
          right: 0px;
          bottom: 1px;
          border: 2px solid #ff464e;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }

      .label-text {
        white-space: pre-line;
        display: inline-block;
        font-size: 13px;
        color: #999;
        text-align: center;

        line-height: 1.2;
      }

      img {
        width: 40px;
        height: 40px;
        object-fit: cover;

        border-radius: 50%;
      }
    }
  }

  .sku {
    background-color: #fff;

    .price-sales {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;

      .sales {
        color: #666;
        font-size: 13px;
      }
    }

    .title-help {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      gap: 40px;

      .title {
        font-size: 15px;
        color: #333;
      }

      .help {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .selected-custom-title {
    color: #999;
    font-size: 12px;
  }

  .selected-custom-content {
    margin-left: 15px;
    color: #333;
    font-size: 12px;
  }

  .express-custom-title {
    color: #999;
    font-size: 12px;
    float: left;
  }

  .express-address {
    margin-left: auto;
    color: #999;
    font-size: 12px;
    float: right;
  }

  .services {
    :deep(.van-cell__title) {
      display: flex !important;
    }

    .service-custom-title {
      color: #999;
      font-size: 12px;
    }

    .service-content {
      margin-left: auto;
      color: #999;
      font-size: 12px;

      ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
      }
    }
  }

  .custom-popup {
    max-height: 85%;

    van-button {
      height: 30px !important;
      width: 60px !important;
    }
  }

  .comments {
    margin-top: 10px;

    .rate-score {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      background-color: #fff;

      .rate {
      }

      .score {
      }
    }

    .rate-tags {
      ul {
        display: flex;
        gap: 10px;
        list-style: none;
        overflow: hidden;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: nowrap;

        li {
          font-size: 11px;
          flex: 1;
          background-color: #ffecef;
        }
      }
    }

    .comment-list {
      -ms-overflow-style: none;
      scrollbar-width: none;
      box-sizing: border-box;

      ul {
        box-sizing: border-box;
        display: flex;
        gap: 10px;
        align-items: center;
        list-style: none;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow-x: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: 100vw; // 强制撑满视口宽度
        padding: 0 10px; // 避免边缘切割

        li {
          box-sizing: border-box;
          background-color: #d3bbbbfa;
          border-radius: 4px;
          flex: none;
          width: 300px;
          height: 100px;

          .avatar-user {
            display: flex;
            padding: 10px;
            align-items: center;
            justify-content: flex-start;

            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              object-fit: cover;
              margin-right: 10px;
            }

            .user-time {
              display: flex;
              flex-direction: column;

              .user {
                font-size: 14px;
                color: #333;

                font-weight: 700;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }

              .time {
                font-size: 11px;
                margin-top: 2px;
                color: #999;
              }
            }
          }

          .comment-content {
            font-size: 13px;
            padding: 0 10px 10px 10px;
            word-break: break-all;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
          }
        }
      }
    }
  }

  .seller {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;

    .shop-logo {
      width: 60px;
      height: 60px;
      display: block;
      flex-shrink: 0;
      object-fit: cover;
    }

    .seller-info {
      width: 100%;
      height: 60px;

      .name-store {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .name {
        }

        .store {
        }
      }

      .num {
      }

      .labels {
        list-style: none;
        display: flex;
        align-items: center;
      }
    }
  }

  .content {
    .desc {
      background-color: #fff;
      padding: 10px;
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .detail_info {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      font-size: 0;
      display: block;

      li {
        display: block;
        width: 100%;

        img {
          width: 100%;
          height: auto;
          display: block;
          vertical-align: top;
        }
      }
    }

    .params {
      font-size: 13px;
      color: #666;
      padding: 10px 0 10px 10px;
    }

    .params-content {
      padding: 10px;
      background: #fff;

      .param-item {
        display: flex;
        padding: 8px 0;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .param-key {
          width: 80px;
          color: #666;
          font-size: 13px;
          flex-shrink: 0;
        }

        .param-value {
          flex: 1;
          color: #333;
          font-size: 13px;

          .value-item {
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 4px;

            &:after {
              content: '、';
            }

            &:last-child:after {
              content: '';
            }
          }
        }
      }
    }
  }
}
</style>
